<html manifest="sample.appcache">
<html>
    <head>
    <title>h5离线缓存练习</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="index.css"/>
    </head>
    <body>
     <ul>
     	<li><img src="1.jpg" alt="" /></li>
     </ul>
     <input list="browsers" autocomplete="off">
<datalist id="browsers" >
   <option value="Internet Explorer">
   <option value="Firefox">
   	<option value="Fire">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>
     <script type="text/javascript">
     	window.addEventListener('load',function(e){
     		window.applicationCache.addEventListener('updateready',function(e){
     			console.log(window.applicationCache.status);
     			if(window.applicationCache.status == window.applicationCache.UPDATEREADY){
     				window.applicationCache.swapCache.swapCache();
     				if(confirm('A new version of this is available.Load it?')){
     					window.location.reload();
     				}else{
     					console.log('manifest didn\'t change');
     					//Manifest didn't changed.Nothing new to server.
     				}
     			}
     		},false)
     	},false)
     </script>
    </body>
</html>